<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 隐私号码保护 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<view class="container" :style="{'--theme-color': themeColor}">
		<view class="container-header flex align-items-center">
			<image class="header-icon" src="/static/mobile.png" mode="aspectFit"></image>
			<view class="header-info flex-item">
				<view class="info-title">隐私号码保护</view>
				<view class="info-subtitle">保护司乘隐私</view>
			</view>
		</view>
		<view class="container-main">
			<view class="main-title">号码加密，通过“虚拟中间号”联系车主</view>
			<view class="main-content">每个订单的虚拟中间号都不相同，保障车主、乘客手机号互不可见</view>
			<view class="main-tips">注:受运营商服务和网络环境限制，号码保护服务可能出现不稳定的情况</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
			})
		},
	}
</script>

<style lang="scss">
	page {
		background: #FFF;
	}

	.container {
		.container-header {
			padding: 64rpx;
			background: linear-gradient(90deg, var(--theme-color) 0%, #FFF 300%);

			.header-icon {
				width: 124rpx;
				height: 124rpx;
			}

			.header-info {
				margin-left: 32rpx;

				.info-title {
					color: #FFF;
					font-size: 48rpx;
					font-weight: 600;
					line-height: 68rpx;
				}

				.info-subtitle {
					margin-top: 16rpx;
					color: #FFF;
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}
		}

		.container-main {
			padding: 48rpx 32rpx;

			.main-title {
				color: #000;
				font-size: 32rpx;
				font-weight: 600;
				line-height: 44rpx;
			}

			.main-content {
				margin-top: 16rpx;
				color: #8D929C;
				font-size: 28rpx;
				font-weight: 600;
				line-height: 40rpx;
			}

			.main-tips {
				margin-top: 48rpx;
				color: #8D929C;
				font-size: 24rpx;
				line-height: 32rpx;
			}
		}
	}
</style>